<template>
  <div>
    <MainContent :title="`平台配置`">
      <SearchBar inline>
        <template #normal>
          <el-form-item label="配置类型">
            <el-select v-model="tableForm.externalType" filterable placeholder="请选择类型" clearable
              @change="configTypeChange">
              <el-option :label="item.title" :value="item.type" :key="item.type" v-for="item in listData" />
            </el-select>
          </el-form-item>
          <el-form-item label="所属平台">
            <el-select v-model="tableForm.externalPlatformType" filterable placeholder="请选择类型" clearable>
              <el-option :label="item.title" :value="item.platformType" :key="item.platformType"
                v-for="item in platformList" />
            </el-select>
          </el-form-item>
        </template>
        <template #toolbar>
          <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
            <el-button type="primary" @click="dialogData.selectConfigDialog = true" v-has="['140101']">添加配置</el-button>
            <!-- TODO 加权限 -->
            <el-button type="primary" @click="showExportData = true">导出</el-button>
          </el-form-item>
        </template>
      </SearchBar>
      <!-- <div class="top">
      
    </div> -->
      <LayoutTable ref="layoutTableRefs" url="/merchant/config/external/configList" :param="tableForm">
        <el-table-column prop="name" label="名称" min-width="180"> </el-table-column>
        <!--      <el-table-column prop="id" label="ID" min-width="180"> </el-table-column>-->

        <el-table-column prop="externalPlatformTypeName" label="所属平台" min-width="180">
        </el-table-column>
        <el-table-column prop="remark" label="描述" min-width="180">
        </el-table-column>
        <el-table-column prop="updateTime" label="修改时间" min-width="180">
          <template #default="scope">
            {{ dateFormat(scope.row.createTime) }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="150" v-has="['140102', '140103']">
          <template #default="scope">
            <el-button link type="primary" @click="toEdit(scope.row)" v-has="['140102']">编辑</el-button>
            <el-button link type="primary" @click="delElMessageBox(scope.row)" v-has="['140103']">删除</el-button>
          </template>
        </el-table-column>
      </LayoutTable>
      <!-- </MainContent> -->
      <addConfig :showDialog="dialogData.addConfigDialog" @cancel="cancel" @confirm="confirm" :addConfigId="addConfigId"
        :addConfigType="addConfigType" :addConfigData="addConfigData"></addConfig>

      <selectConfig :showDialog="dialogData.selectConfigDialog" :listData="listData" @cancel="cancel"
        @confirmSelect="confirmSelect"></selectConfig>
      <exportData v-model:show-dialog="showExportData" :search-data="tableForm" title="平台配置"
        export-type="externalMerchantConfigExport">
      </exportData>
    </MainContent>
  </div>
</template>
<script lang="ts">
export default {
  name: 'SystemPlatform'
}
</script>
<script setup lang="ts">
import sysConfigApi from "@/api/sysConfigApi";
import addConfig from "./components/addConfig.vue";
import selectConfig from "./components/selectConfig.vue";
import { dateFormat } from "@/utils/filters";
import { uniqueArrObj } from "@/utils/index";
import exportData from "@/components/exportData/exportData.vue";
const showExportData = ref(false)
const layoutTableRefs = ref()
const addConfigType = ref("");
const addConfigId = ref("");
const addConfigData = ref(null);
const listData = ref([] as any) // 配置类型list
const platformList = ref([] as any) // 所属平台list
const dialogData = reactive({
  addConfigDialog: false,
  selectConfigDialog: false,
});
const tableForm = ref({
  externalType: "", //配置类型
  externalPlatformType: "", //所属平台
})

const typeList = ref({ sms: "短信", pay: "支付", weChat: "微信", email: "邮件" });
const toEdit = (row: any) => {
  // addConfigId.value = String(row.id);
  addConfigData.value = JSON.parse(JSON.stringify(row));
  dialogData.addConfigDialog = true;
};

const delElMessageBox = (row: any) => {
  ElMessageBox.confirm("是否删除", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      delConfig(row);
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消删除",
      });
    });
};

const delConfig = async (row: any) => {
  let rs: any = await sysConfigApi.delConfig({ id: row.id });
  if (rs.code === 200) {
    ElMessage.success("删除成功");
    onSearch();
  }
};

const configTypeChange = (val: string) => {
  tableForm.value.externalPlatformType = ""
  if (val) {
    platformList.value = listData.value.find((item: any) => item.type == val).platforms
  } else {
    let arr: any = []
    listData.value.forEach((item: any) => {

      arr = [...item.platforms, ...arr]
    })

    platformList.value = uniqueArrObj(arr, 'platformType')

    // uniqueArrObj
  }
}
// 获取配置类型
const getConfigurationTypes = async () => {
  let params = {
    currentPage: 1,
    showCount: -1,
  }
  let rs: any = await sysConfigApi.getConfigurationTypes(params);
  if (rs.code === 200) {
    listData.value = rs.payload
    // ruleForm.value.definition = rs.payload.definition;
    // ruleForm.value.props = rs.payload.props;
  }
}

const confirmSelect = (id: any) => {
  dialogData.selectConfigDialog = false;
  addConfigType.value = id;
  dialogData.addConfigDialog = true;
};
const confirm = (data: any) => {
  onSearch();
};
const cancel = (dialogType: any) => {
  dialogData[dialogType] = false;
  addConfigType.value = "";
  addConfigData.value = null;
  // modelData.value = {id: null}
};
const onSearch = () => {
  layoutTableRefs.value.search()
};

const store = useStore();
// 监听机构
const insId = computed(() => {
  return store.state.insId.insId;
});
watch(
  () => insId,
  () => {
    onSearch();
  },
  {
    deep: true
  }
)
onBeforeMount(() => {
  getConfigurationTypes()
})
</script>

<style lang="scss" scoped>
.top {
  margin-bottom: 20px;
}
</style>
